<template>
	<div class="Orders">
		<!-- 导航 -->
		<nav-bar
			title="确认订单"
			left-text=""
			left-arrow
			@click-left="onClickLeft"
		/>
		<!-- 主要内容 -->
		<div
			class="Orders-main"
			style="
				flex: 1;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
			"
		>
			<!-- 套餐 -->
			<div
				v-for="item in cart"
				style="
					background-color: white;
					padding-top: 0.5rem;
					padding-left: 0.5rem;
					font-size: 0.75rem;
				"
			>
				<div style="display: flex">
					<div
						style="
							width: 25%;
							height: 10vh;
							margin-right: 0.5rem;
						"
					>
						<img :src="dalImg(item.image)" alt="图片" style="width: 100%;height: 10vh;"/>
					</div>
					<div style="flex: 1">
						<p style="font-size: 0.9rem">
							<i style="color: orange; font-size: 0.75rem"
								>套餐</i
							>
							{{ item.name }}
						</p>
						<div style="color: #999; line-height: 1.5rem">
							<span style="margin-right: 1rem"
								>视频:20集</span
							><span>习题 {{ item.textNumber }} 题</span>
						</div>
						<p style="color: #666">一年有效期</p>
						<div style="text-align: right; font-size: 0.9rem">
							<span
								style="
									font-size: 0.75rem;
									color: #999;
									text-decoration: line-through;
								"
								><i
									class="fa fa-copyright"
									style="text-decoration: line-through"
								></i
								>{{ item.totalPrcie }} </span
							><span style="margin: 0 0.5rem; color: orange"
								><i class="fa fa-copyright"></i>
								{{ item.totalPrcie }}
							</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 三天无理由退换 -->
			<div
				style="
					background-color: white;
					margin-top: 0.3rem;
					padding: 0.5rem;
					font-size: 0.75rem;
				"
			>
				<div style="display: flex">
					<span
						style="
							width: 0.1875rem;
							height: 0.9375rem;
							background-color: #1989fa;
							margin-right: 0.3rem;
						"
					></span>
					<h6>三天无理由退换</h6>
				</div>
				<p style="color: #999; margin-top: 0.5rem">
					退款将以超级币的形式退至您的超级课堂学习账户，便于您重新选购其他课程。而已退款将被冻结账号。
				</p>
			</div>

			<!-- 超级币支付 -->
			<div
				style="
					background-color: white;
					margin-top: 0.3rem;
					display: flex;
					padding: 0.5rem;
					font-size: 0.9rem;
					justify-content: space-between;
				"
			>
				<div style="display: flex; flex-direction: column">
					<span>超级币支付</span>
					<span
						style="
							color: orange;
							font-size: 0.75rem;
							margin-top: 0.3rem;
						"
						>账户余额0超级币，还需支付198元人民币</span
					>
				</div>
				<div><Switch v-model="checked" size="0.9375rem" /></div>
			</div>

			<!-- 优惠券 -->
			<div
				style="
					flex: 1;
					margin-top: 0.3rem;
					background-color: white;
					display: flex;
					justify-content: space-between;
					padding: 0.5rem;
					font-size: 0.75rem;
					color: #333;
				"
			>
				<span>优惠券</span
				><span style="color: #999"
					>无可用优惠券<icon name="arrow"
				/></span>
			</div>
		</div>

		<!-- 底部 -->
		<div style="font-size: 0.75rem; color: #999; background-color: white">
			<notice-bar
				:scrollable="false"
				text="温馨提示：未满14周岁的孩子请在家长的监护陪同下下单购买"
			/>
			<div style="display: flex; box-sizing: border-box">
				<span
					style="
						flex: 1;
						text-align: right;
						padding: 0 0.3rem;
						line-height: 2rem;
					"
					>合计：<i style="color: orange">198元</i></span
				>
				<span
					style="
						background-color: #1989fa;
						height: 2rem;
						line-height: 2rem;
						text-align: center;
						width: 5rem;
						color: white;
					"
					@click="del(index)"
					>支付订单</span
				>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	NavBar,
	NoticeBar,
	Collapse,
	CollapseItem,
	Switch,
	Icon,
	Toast,
} from "vant";
import { ref } from "vue";
import "font-awesome/css/font-awesome.min.css";
import { OrdersAPI } from "../API/wang";
import { localScartAPI, localDataAPI, localCartAPI } from "../API/jiang";
import { useRoute, useRouter } from "vue-router";
import { dalImg } from "../Utils/tools";
/* 引入接口 */
const route = useRoute();
const router = useRouter();
// const Orders = ref([]);
// //套餐下单
// const loadOrdersdata = async () => {
// 	const data = await OrdersAPI(route.query.id);
// 	console.log(data);
// 	Orders.value = data.data;
// 	console.log(Orders.value);
// };
// loadOrdersdata();
/* 返回上级 */
const onClickLeft = () => history.back();
/* 折叠面板 */
const activeNames = ref(["1"]);
/* 开关 */
const checked = ref(true);

//用户id
const id = ref("");
localDataAPI().then((res) => {
	id.value = res.data.id;
	console.log(id.value);
});

//获取购物车信息
const cart = ref([]);
localCartAPI().then((res) => {
	cart.value = res.data;
});

//清空购物车模块
const del = (uid) => {
	uid = id.value;
	localScartAPI(uid).then((res) => {
		console.log(res);
		Toast.success("支付成功");
		console.log(uid);
		router.push({
			name: "Home-Cart",
		});
	});
};
</script>
<style>
#app {
	padding-bottom: 0;
}
.Orders {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: rgb(239, 242, 245);
	box-sizing: border-box;
}
/* 导航 */
.Orders .van-nav-bar {
	background-color: #1989fa;
}
.Orders .van-nav-bar .van-icon {
	color: white;
}
.Orders .van-nav-bar__title {
	color: white;
}
/* 课程详情 */
.Orders .van-collapse-item__content {
	background-color: rgb(226, 226, 226);
	padding: 0;
	margin-bottom: 0.3rem;
}
/* 底部 */
.Orders .van-notice-bar__content.van-ellipsis {
	font-size: 0.75rem;
}
.Orders .van-notice-bar {
	height: 1.5rem;
}
i {
	font-style: normal;
}
/* fa fa-copyright*/
</style>
